<cfoutput>
	<script src="https://raw.github.com/nnnick/Chart.js/master/Chart.js"></script>
	<cfset colorlist = "##FE4000,##F38630,##E0E4CC,##6cd373,##69D2E7,##645aa2,##a2885a,##a2645a,##907760,##8f6090" />
	<script>
		$(document).ready(function(){
			var data = 
				[<cfloop query="rc.data.1" startrow="1" endrow="#(rc.data.1.recordCount gt 8)?8:rc.data.1.recordcount#">
					<cfif currentRow neq 1>,</cfif>
					{
						value: #rc.data.1.num#,
						color:"#listGetAt(colorlist,rc.data.1.currentRow)#"
					}
				</cfloop>]
			var ctx = document.getElementById("myChart1").getContext("2d");
			var myNewChart = new Chart(ctx).Pie(data);
		});
	</script> 

    <script>
		$(document).ready(function(){
			var data = 
				[<cfloop query="rc.data.2" startrow="1" endrow="#(rc.data.2.recordCount gt 8)?8:rc.data.2.recordcount#">
					<cfif currentRow neq 1>,</cfif>
					{
						value: #rc.data.2.num#,
						color:"#listGetAt(colorlist,rc.data.2.currentRow)#"
					}
				</cfloop>]
			var ctx = document.getElementById("myChart2").getContext("2d");
			var myNewChart = new Chart(ctx).Pie(data);
		});
	</script> 

    <div data-role="collapsible-set">
        <div data-role="collapsible" data-collapsed="false" >
            <h3>
                Tropical Storm Data Chart By State
            </h3>

            <canvas id="myChart2" width="200" height="200"></canvas>

            <div class="legend">
				<cfloop query="rc.data.2" startrow="1" endrow="#(rc.data.2.recordCount gt 8)?8:rc.data.2.recordcount#">
					<div class="item" style="background-color:#listGetAt(colorlist,rc.data.2.currentRow)#;">#rc.data.2.category#</div> 
				</cfloop>
            </div>
            
        </div>
        <div data-role="collapsible" data-collapsed="true" >
            <h3>
                Tropical Storm Chart By Property Loss
            </h3>

            <canvas id="myChart1" width="200" height="200"></canvas>

            <div class="legend">
				<cfloop query="rc.data.1" startrow="1" endrow="#(rc.data.1.recordCount gt 8)?8:rc.data.1.recordcount#">
					<div class="item" style="background-color:#listGetAt(colorlist,rc.data.1.currentRow)#;">$#rc.data.1.category#</div> 
				</cfloop>
            </div>
            
        </div>
    </div>

</cfoutput>